<template>
    <div class="parent">
        <h1>顶层组件-{{ count }}-{{ itemData }}</h1>
        <button @click="changeCount">修改数据</button>
        <ListCom/>
    </div>
</template>

<script setup lang="ts">
import ListCom from '@/components/ListCom.vue'

//从vue包引入provide方法
import { provide,ref,inject } from 'vue';
//定义普通数据传递
//通过provide方法去注册发送数据（发布者）
//provide(定义的数据名称，发送的数据)
provide('parentData','顶层组件的数据')

//传递响应式数据
const count =ref<number>(0)
provide('count',count)

//修改count的响应式数据
function changeCount(){
    count.value+=1
}

//传递函数方法
// provide('changeCount',()=>{
//     count.value-=1
// })

provide('changeCount',changeCount)

//接收底层组件发布的数据
//接收不到，说明provide和inject跨层级组件数据传递是单向的，只能从高层往低层传，不能反方向传递数据
const itemData=inject('itemData')

</script>

<style scoped lang="less">
.parent{
    width:100%;
    height: 500px;
    background-color: gray;
}
</style>